<template>
	<uni-nav-bar title="提货详情" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package" style="padding:20rpx 0px">
		<view class="space-between shopTop">
			<view class="packageLsit" @click="navTo('shopp/Shopkeeper?id='+methodSetail.store_id)" >
				<image src="../../static/groupBenefits/shop.png" mode=""></image>
				<text>{{methodSetail.store_name}}</text>
				<uni-icons type="forward" size="19" color="#666"></uni-icons>
			</view>
		</view>
		<ShopList :pauth="type" :shoppAll="methodSetail" 
		v-if="type=='normal'"
		 :jump="'group'"
		 :money="'delivery'"
		 ></ShopList>
		<IntegralShop :shoppAll="methodSetail" v-if="type=='virtual'" @tabSubmit="tabSubmit" :money="'delivery'"></IntegralShop>
	</view>
	<view class="package column" v-if="type=='normal'">
		<view class="title">提货码</view>
		<image :src="methodSetail.code_image" mode="" class="paImg"></image>
		<view class="number">{{methodSetail.code}}</view>
		<view class="space-between shop"><view>联系商家</view><view><text>{{methodSetail.store_realname}}</text>
		<text class="tel"  @click="telCall(methodSetail.store_phone)">{{methodSetail.store_phone}}</text></view></view>
		<view class="location" @click="openNavigaPad()"><view>店铺地址</view><view><image src="../../static/groupBenefits/dh.png" mode=""></image>
		<text>{{methodSetail.store_address}}</text></view></view>
	</view>
	<view class="package  telNumber" v-if="type=='virtual'">
		<view>请输入手机号进行兑换</view>
		<view class="space-between">
			<input type="number" placeholder="输入手机号" v-model="phone" maxlength="11" @input="onInput($event)">
			<text @click="openDelivery()">兑换</text>
		</view>
	</view>
	<view class="package contact" v-if="type=='virtual'">
		<view>联系客服：</view>
		<view @click="telCall('400-109-1606')">400 109 1606</view>
	</view>
	<!-- 提货弹框 -->
	<uni-popup ref="deliveryPopup" type="center" :is-mask-click="false">
		<SureTel :title="'是否提货'" :text="phone" :type="'center'" @close="closeDelivery" @submit="submit"></SureTel>
	</uni-popup>
	<Lotlats @position="position"></Lotlats>
	<!-- 导航-->
	<NavigationS 
	    :currentLot="lon"
	    :currentLat="lat"
	    :longitude="methodSetail.longitude"
		:latitude="methodSetail.latitude"
		:addres="methodSetail.store_address"
		:name="methodSetail.store_name"
		ref="NavigationPopup">
	</NavigationS>
</template>

<script setup lang="ts">
import Lotlats from '@c/team/Lotlat.vue';
import { navBack, navTo } from '@/utils/navigator';
import { errorToast, showToast, successToast,showLoading } from '@/utils/prompt';
import ShopList from '@c/groupBenefits/shopGrid.vue';
import IntegralShop from '@c/order/IntegralShops.vue';
import NavigationS from '@c/mapFilling/Navigation.vue';
import SureTel from '@c/pobulic/public.vue';
import { onLoad } from '@dcloudio/uni-app';
import { telCall } from '@/utils/copyText';
import { toPublish } from '@mqtt';
import { methodDetail } from '@/gql/group';
import { getDriverID } from '@/stores/driverID';
import { ref, Ref, nextTick } from 'vue';
const admin_id = getDriverID();
const lon = ref();
const lat = ref();
const NavigationPopup = ref(null);

const deliveryPopup = ref(null);
const methodSetail: Ref<any> = ref({});
const type = ref(''); //normal实体商品 virtual兑换商品
const orderID = ref('');

const phone = ref('');
const repeat = ref(true); //放重复点击
onLoad((options) => {
  type.value = options.type;
  orderID.value = options.id;
  init();
});
/**
 * 获取当前城市信息
 * @param {Object} lat 当前位置的纬度
 * @param {Object} lot 当前位置的经度
 */
function position(la, lo) {
  lon.value = lo;
  lat.value = la;
}
function init() {
  const payload = {
    query: methodDetail,
    variables: { order_id: Number(orderID.value) },
  };
  toPublish('ql/store/getOrderHexiaoInfo', payload, (obj: any) => {
    const { order_hexiao_info } = obj.data;
    methodSetail.value = order_hexiao_info;
  });
}
function onInput(evt: any) {
  const { detail } = evt;
  const rule = /[^\d]/g; //只能输入数字
  nextTick(() => {
    const value = detail.value.replace(rule, '');
    phone.value = value;
  });
}
/**
 * 正则手机号码
 */
function phoneTel() {
  const mobile = /^1[3-9]\d{9}$/;
  if (!mobile.test(phone.value)) {
    showToast('请输入正确的手机号码');
    return false;
  } else {
    return true;
  }
}
function submit() {
  const payload = {
    admin_id,
    store_id: Number(methodSetail.value.store_id),
    phone: phone.value,
    order_id: Number(orderID.value),
	};
	showLoading()
  if (!repeat.value) {
    return;
  }
  repeat.value = false;
  toPublish('store/doDuiHuan', payload, (obj: any) => {
    const { code, msg, data } = obj;
    closeDelivery();
    if (code === 1) {
      successToast('提货成功，货品将在1-10分钟内到账,请前往查看');
      setTimeout(() => {
        uni.redirectTo({
          url:
            '/pages/groupBenefits/upSucceeded?id=' +
            orderID.value +
            '&type=' +
            type.value +
            '&storeId=' +
            methodSetail.value.store_id,
        });
      }, 1000);
    } else {
      repeat.value = true;
      errorToast(msg);
    }
  });
}
function tabSubmit(ids) {
  navTo('pointsMall/integralDetail?id=' + ids);
}
function openNavigaPad() {
  NavigationPopup.value.NavigationLoc();
}
function openDelivery() {
  if (phoneTel()) {
    deliveryPopup.value.open();
  }
}
function closeDelivery() {
  deliveryPopup.value.close();
}
</script>

<style scoped lang="less">
@import url('../groupBenefits/less/deliveryDetail.less');
.shopTop {
  width: 100%;
  box-sizing: border-box;
  padding: 0px 20rpx;
}
.packageLsit {
  display: flex;
  align-items: center;
  image {
    width: 50rpx;
    height: 50rpx;
  }
  text {
    font-size: 30rpx;
    font-weight: 400;
    color: #181818;
    margin: 0px 10rpx;
  }
}
.tit {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #309bff;
}
</style>